<!--sidebar-menu-->
<div id="sidebar" class="clearfix"><!-- <a href="#" class="visible-phone"><i class="icon icon-home"></i> Dashboard</a> -->
  <ul style="display: block;">
  {% include "common/menu.html" %}
  </ul>
</div>
<!--end sidebar-menu-->

<div id="content">
  
    <div class="container-fluid" style="padding: 0;">
      <div class="widget-box tab-tabs" >
          <div class="widget-title">
            <ul class="nav nav-tabs">
                {% include "common/tab.html" %}
            </ul>
          </div>

              <div class="tab-box" style="margin: 30px 25px 10px 25px;">
                  <div class="row-fluid font20" style="margin-bottom: 10px;">
                      <form action="" method="post">
                          <input type="hidden" value="1" name="isexcel">
                          <button type="submit" class="btn btn-purple pull-right">导出表格</button>
                          <a class="date-calendar pull-right" style="margin-right: 10px;"><i class=" icon-calendar"></i> <input name="excelTime" id="mydate"  placeholder="请输入日期" value="" style="height: 34px;"></a>
                      </form>
                  </div>

                  {% include "common/pagination.html" %}

                  <table id="tableList"  class="table with-check table-purple">
                      <thead>
                      <tr>
                          <th>申请人</th>
                          <th>申请时间</th>
                          <th>结算对象</th>
                          <th>结算总金额（人民币）</th>
                          <th>结算人</th>
                          <th>结算时间</th>
                          <th></th>
                      </tr>
                      </thead>
                      <tbody>

                      </tbody>
                  </table>


              </div>


         </div>
        </div>
    
    </div>
<div id="clearingDialog" style="display: none;">
    <div id="basicInfo">

    </div>



</div>
<div id="Payroll" style="display: none;">
    <div>
        <span class="pull-left" style="margin-top: 6px;margin-right:10px;font-size: 16px;">将工资表导出EXCEL</span>
        <form action="/ajax/salaryByExcel" method="post" class="pull-left">
            <input id="familyId" type="hidden" value="" name="familyId">
            <button type="submit" class="btn btn-purple" style="margin-bottom: 10px;">导出表格</button>
        </form>
    </div>

    <div class="row-fluid">
        <table id="tableList3"  class="table with-check table-purple">
            <thead>
            <tr>
                <th>uid</th>
                <th>昵称</th>
                <th>真实姓名</th>
                <th>身份证</th>
                <th>电话</th>
                <th>结算方式</th>
                <th>底薪（元）</th>
                <th>分成（元）</th>
                <th>总额（元）</th>
                <th>工作时长（小时）</th>
            </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
        <div class="row-fluid">
            <div class="total pull-left">
                <p class="font font18 cr-gy">
                    <span>记录总数：</span>
                    <span id="count1">0</span>
                </p>
            </div>

            <div id="pagination3" class="pagination alternate pull-right"></div>
        </div>
    </div>


</div>

<script src="{{static_url('web/js/daterangepicker.jQuery.js')}}"></script>
<script src="{{static_url('web/js/jquery.ui.datepicker-zh-CN.js')}}"></script>
<script type="text/javascript" src="{{static_url('web/js/91ns.agent.js')}}"></script>
<script type="text/javascript" src="{{static_url('web/js/jQuery.peSlider.js')}}"></script>
<link rel="stylesheet" href="{{static_url('web/css/ui.daterangepicker.css')}}">

<script type="text/javascript">

$(function(){
    $('#mydate').daterangepicker({
        presetRanges:[
            //{text:'最近一周', dateStart:'yesterday-7days', dateEnd:'yesterday' },
            //{text:'最近一月', dateStart:'yesterday-1month', dateEnd:'yesterday' },
            //{text:'最近一年', dateStart:'yesterday-1year', dateEnd:'yesterday' }
        ],
        presets:{
            dateRange:'自定义时间'
        },
        rangeStartTitle:'起始日期',
        rangeEndTitle:'结束日期',
        nextLinkText:'下月',
        prevLinkText:'上月',
        doneButtonText:'确定',
        cancelButtonText:'取消',
        earliestDate:'',
        latestDate:Date.parse('today'),
        constrainDates:true,
        rangeSplitter:'-',
        dateFormat:'yy-mm-dd',
        closeOnSelect:false,
        onOpen:function(){
            $('.ui-daterangepicker-dateRange').click().parent().hide();
            $('.ui-daterangepickercontain').css({left:($('#mydate').offset().left-325)+'px'});
        },
        onClose:function(){
            getDataList();
        }
        }
    );

    getDataList();
});

function getDataList(index){
    var data={};
    if($('#mydate').val()!=''){
        data.startDate= $('#mydate').val().substring(0,10);
    }else{
        data.startDate= '';
    }

    if($('#mydate').val()!=''&&$('#mydate').val().length>13){
        data.endDate=$('#mydate').val().substring(13,23);
    }else{
        data.endDate='';
    }

    data.page=index||1;
    data.pageSize=global.pageSize;
    $.ajax({
        type:"POST",
        data:data,
        url:'/ajax/getSettleSuccess',
        dataType:'json',
        success:function(res){
            var data=res.data;
            var tableList=document.getElementById("tableList");
            var tbody= tableList.getElementsByTagName('tbody')[0];
            dataTable.clearData(tbody);

            var count=document.getElementById('count');
            count.innerHTML=data.count;

            for(var i=0;i<data.list.length;i++){
                addRow(tbody,data.list[i]);
            }
            if(!index||index==0){
                utilsPagination("#pagination",data.count,global.pageSize,function(page_index,jq){
                    page_index+=1;
                    getDataList(page_index);
                });
            }
        }

    });
}

function addRow(table,data){

    var row=table.insertRow();
    var cell=row.insertCell(0);
    var cell1=row.insertCell(1);
    var cell2=row.insertCell(2);
    var cell3=row.insertCell(3);
    var cell4=row.insertCell(4);
    var cell5=row.insertCell(5);
    var cell6=row.insertCell(6);


    cell.innerHTML=data.applyUser;
    cell1.innerHTML=data.createTime;
    cell2.innerHTML='<div class="anchor-info"><img src="'+data.logo+'">&nbsp;<span>'+data.name+'</span></div>';
    cell3.innerHTML=data.rmb;
    cell4.innerHTML=data.auditUser;
    cell5.innerHTML=data.auditTime;

    var div=document.createElement("div"),
            div1=document.createElement("div"),
            div2=document.createElement("div");
    div.style.cssText='margin:0 auto;width:185px;'
    div1.innerHTML='<span  class="a-edit font font18 cr-pe cursor-pointer" onclick="clearingDialog('+data.id+','+data.type+')" >&nbsp;结算详情</span>';
    div2.style.cssText='float:left'
    div2.innerHTML='<span class="a-edit font font18 cr-pe cursor-pointer" onclick="Payroll('+data.uid+')">&nbsp;主播工资表&nbsp;|</span>';


    if(data.type==2){
        div.appendChild(div2);
    }
    div.appendChild(div1);
    cell6.appendChild(div);
    return row;
}

function clearingDialog(id,typeid){
    $('#clearingDialog').dialog({
        autoOpen:true,
        width:725,
        height:600,
        title:'结算详情',
        resizable:false,
        modal:true,
        open:function(){
            $('#stid').val(id);
            var data={};
            data.id=id;

            if(typeid==1){
                $.ajax({
                    type:"POST",
                    data:data,
                    url:'/ajax/anchorSettleInfo',
                    dataType:'json',
                    success:function(res){
                        var data=res.data;
                        $("#basicInfo").html('');
                        $("#basicInfo").append(html(data,typeid));

                    }

                });
            }
            else{
                $.ajax({
                    type:"POST",
                    data:data,
                    url:'/ajax/familySettleInfo',
                    dataType:'json',
                    success:function(res){
                        var data=res.data;
                        $("#basicInfo").html('');
                        $("#basicInfo").append(html(data,typeid));

                    }

                });
            }

        },
        buttons: {
            /*"确定": function () {

             }*///,
            /*"取消": function () {


             }*/
        }
    });
}

function html(data,typeid){
    var html='';
    html+='<div class="row-fluid" style="border-bottom: 1px dashed #ddd;line-height: 50px;">';
    html+='<div><span class="clearleft">申请人：'+data.applyUser+'</span><span class="clearright">申请时间：'+data.createTime+'</span></div><br>';
    html+='<div><span class="clearleft">结算人：'+data.auditUser+'</span><span class="clearright">结算时间：'+data.auditTime+'</span></div></div>';
    html+='<div class="row-fluid" style="border-bottom: 1px dashed #ddd;line-height: 55px;">';
    if(typeid==1){
        html+='<div><span class="clearleft">uid：'+data.uid+'</span><span class="clearright">昵称：'+data.nickName+'</span></div><br>';
        html+='<div><span class="clearleft">真实姓名：'+data.realName+'</span><span class="clearright">身份证：'+data.idCard+'</span></div><br>';
        html+='<div><span class="clearleft">电话：'+data.telephone+'</span><span class="clearright">结算方式：';
        if(data.settleType==1){
            html+='按播出收益</span></div><br>';
        }
        if(data.settleType==2){
            html+='按播出时长</span></div><br>';
        }
        if(data.settleType==3){
            html+='收益+时长</span></div><br>';
        }
        if(!data.settleType || data.settleType==0){
            html+='无</span></div><br>';
        }
        html+='<div><span class="clearleft">底薪：'+data.basicSalary+'</span><span class="clearright">分成：'+data.rmb+'元</span></div><br>';
        html+='<div><span class="clearleft">开户行：'+data.bank+'</span><span class="clearright">卡号：'+data.cardNumber+'</span></div> </div>';
    }
    else{
        html+='<div><span class="clearleft">家族：'+data.name+'</span><span class="clearright">家族长：'+data.nickName+'</span></div><br>';
        html+='<div><span class="clearleft">电话：'+data.telephone+'</span><span class="clearright">身份证：'+data.idCard+'</span></div><br>';
        html+='<div><span class="clearleft">底薪：'+data.basicSalary+'元</span><span class="clearright">分成：'+data.rmb+'元</span></div><br>';
        html+='<div><span class="clearleft">开户行：'+data.bank+'</span><span class="clearright">卡号：'+data.cardNumber+'</span></div> </div>';
    }

    html+=' <div class="row-fluid" style="height: 55px;line-height: 55px;margin-top: 10px;"><span class="clearleft" style="margin-top: 7px;">结算总额：'+data.total+'元</span> ';
    html+='<span class="clearright">转账凭证：<img style="width: 120px;height: 70px;" src="'+data.auditImg+'"></span> </div>';
    html+='<div class="row-fluid" style="height: 55px;line-height: 55px;margin-top: 10px;"><span class="clearleft">备注：'+data.remark+'</span> </div>';
    return html;
}

function Payroll(uid,index){
    $('#Payroll').dialog({
        autoOpen:true,
        width:1180,
        title:'主播工资表',
        resizable:false,
        modal:true,
        open:function(){
//            $('#stid').val(id);
            $('#familyId').val(uid);
            var data={};
            data.familyId=uid;
            data.page=index||1;
            data.pageSize=global.pageSize;
            $.ajax({
                type:"POST",
                data:data,
                url:'/ajax/anchorSalaryList',
                dataType:'json',
                success:function(res){
                    var data=res.data;
                    var tableList=document.getElementById("tableList3");
                    var tbody= tableList.getElementsByTagName('tbody')[0];
                    dataTable.clearData(tbody);

                    var count=document.getElementById('count1');
                    count.innerHTML=data.count;

                    for(var i=0;i<data.list.length;i++){
                        addRowPayroll(tbody,data.list[i]);
                    }
                    if(!index||index==0){
                        utilsPagination("#pagination3",data.count,global.pageSize,function(page_index,jq){
                            page_index+=1;
                            Payroll(uid,page_index);
                        });
                    }


                }

            });
        },
        buttons: {
            /*"确定": function () {

             }*///,
            /*"取消": function () {


             }*/
        }
    });
}

function addRowPayroll(table,data){

    var row=table.insertRow();
    var cell=row.insertCell(0);
    var cell1=row.insertCell(1);
    var cell2=row.insertCell(2);
    var cell3=row.insertCell(3);
    var cell4=row.insertCell(4);
    var cell5=row.insertCell(5);
    var cell6=row.insertCell(6);
    var cell7=row.insertCell(7);
    var cell8=row.insertCell(8);
    var cell9=row.insertCell(9);

    cell.innerHTML='<div class="anchor-info"><img src="'+data.logo+'">&nbsp;<span>'+data.uid+'</span></div>';
    cell1.innerHTML=data.nickName;
    cell2.innerHTML=data.realName;
    cell3.innerHTML=data.idCard;
    cell4.innerHTML=data.telephone;
    if(data.settleType==1){
        cell5.innerHTML='按播出收益';
    }
    if(data.settleType==2){
        cell5.innerHTML='按播出时长';
    }
    if(data.settleType==3){
        cell5.innerHTML='收益+时长';
    }
    cell6.innerHTML=data.basicSalary;
    cell7.innerHTML=data.rmb;
    cell8.innerHTML=data.total;
    if(data.duration>=60){
        var hourmax=(Math.floor(data.duration/3600)+"小时"+Math.floor((data.duration%3600)/60)+"分钟");
        cell9.innerHTML=hourmax;
    }
    else{
        cell9.innerHTML='0小时1分钟';
    }
    return row;
}


</script>